<!Doctype html>
<html>
    <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/semantic-ui/2.2.10/semantic.min.css">
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<!-- <script
	     src="https://code.jquery.com/jquery-3.1.1.min.js"
	     integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
	     crossorigin="anonymous"></script> -->
	<script src="https://cdn.bootcss.com/semantic-ui/2.2.10/semantic.min.js"></script>
	<script src="https://cdn.bootcss.com/underscore.js/1.8.3/underscore-min.js"></script>
	<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
	<style>
	    /* td{padding:2px;color:#666666;border:1px solid #9eccf6;white-space:nowrap;}
	       table{line-height:100%;border-collapse:collapse;} */
		body {
			background-color: #DADADA;
		}
		body > .grid {
			height: 100%;
		}
		.image {
			margin-top: -100px;
		}
		.column {
			max-width: 400px;
		}
	</style>
	<title>登入</title>
    </head>
    <body>
    	<div class="ui middle aligned center aligned grid">
			<div class="column">
				<h2 class="ui teal image header">
					<img src="http://www.dtyl.com/images/logo.png" class="image">
					<div class="content">
					資源管理程式 V1.0.1
					</div>
				</h2>
				<form class="ui large form">
					<div class="ui stacked segment">
						<div class="field">
							<div class="ui left icon input">
								<i class="mail icon"></i>
								<input type="text" name="email" placeholder="E-mail(電子郵件)">
							</div>
						</div>
						<div class="field">
							<div class="ui left icon input">
								<i class="user icon"></i>
								<input type="text" name="name" placeholder="Name(姓名)">
							</div>
						</div>
						<div class="ui fluid large teal submit button">登入</div>
					</div>

					<div class="ui error message"></div>

				</form>

				<div class="ui message">
					沒有賬戶？ <a href="#">註冊新賬戶</a>
				</div>
			</div>
		</div>

	<script>
		$(document)
		    .ready(function() {
		      $('.ui.form')
		        .form({
		          fields: {
		            email: {
		              identifier  : 'email',
		              rules: [
		                {
		                  type   : 'empty',
		                  prompt : '請輸入電子郵件地址'
		                },
		                {
		                  type   : 'email',
		                  prompt : '請輸入正確的電子郵件地址'
		                }
		              ]
		            }//,
		            // name: {
		            //   identifier  : 'password',
		            //   rules: [
		            //     {
		            //       type   : 'empty',
		            //       prompt : '請輸入密碼'
		            //     }//,
		            //     // {
		            //     //   type   : 'length[6]',
		            //     //   prompt : 'Your password must be at least 6 characters'
		            //     // }
		            //   ]
		            // }
		          }
		        })
		      ;
		    })
	</script>

    </body>
</html>
